<template>
  <div>
    <h1>我是首页</h1>
    <div>{{x}},{{y}}</div>
    <TodolistVue />

    <!--  <Rate :value="score" @update-rate="updateRate">你猜：</Rate>-->
    <Rate v-model="score"></Rate>
    <Rate v-model="score1" theme="red">
      图标 <img src="" width="10" alt="">
    </Rate>
    <Rate v-model="score2" theme="green"></Rate>
    <hr />
    <p>动画1</p>
    <Animation1></Animation1>
    <p>动画2</p>
    <Animation2></Animation2>
    <p>动画3</p>
    <Animation3></Animation3>
    <p>VUEX1</p>
    <Vuex1></Vuex1>
  </div>
</template>

<script setup>
  import TodolistVue from '../components/Todolist.vue'
  import Rate from '../components/Rate.vue'
  import Animation1 from '../components/animation/Animation1.vue'
  import Animation2 from '../components/animation/Animation2.vue'
  import Animation3 from '../components/animation/Animation3.vue'
  import Vuex1 from '../components/store/store1.vue'

  import { ref } from 'vue'

  import {useMouse} from '../utils/mouse'
  import { getList } from '@/api/list.js'

  let {x,y} = useMouse()

  let score = ref(3.5)
  let score1 = ref(4)
  let score2 = ref(1)

  function updateRate(num) {
    score.value = num
  }

  getList()
</script>

<style scoped>

</style>
